import React from 'react'

import {withRouter} from 'react-router-dom'

import styles from './index.module.scss'

import PropTypes from 'prop-types'

import { BASE_URL } from '../../utils'

function HouseItem({ houseImg, title, desc, price, tags, history, houseCode}) {
  return (
    <div className={styles.house} onClick={() => history.push(`/details/${houseCode}`)}>
      <div className={styles.imgWrap}>
        <img
          className={styles.img}
          src={`${BASE_URL}${houseImg}`}
          alt=""
        />
      </div>
      <div className={styles.content}>
        <h3 className={styles.title}>{title}</h3>
        <div className={styles.desc}>{desc}</div>
        <div>
          {tags.map((tag, index) => {
            const tagClass = index < 3 ? `tag${index + 1}` : 'tag3'
            return (
              <span
                key={index}
                className={[styles.tag, styles[tagClass]].join(' ')}
              >
                {tag}
              </span>
            )
          })}
        </div>
        <div className={styles.price}>
          <span className={styles.priceNum}>{price}</span> 元/月
          </div>
      </div>
    </div>
  )
}
// 添加属性校验
HouseItem.propTypes = {
  houseImg: PropTypes.string.isRequired,
  title: PropTypes.string.isRequired,
  desc: PropTypes.string.isRequired,
  price: PropTypes.number.isRequired,
  tags: PropTypes.array.isRequired
}
export default withRouter(HouseItem)
